
 <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
    <title>什么是响应式编程 | RyanHuen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    
    <meta name="author" content="RyanHuen">
    

    
    <meta name="description" content="什么是响应式编程？
请看下列代码：
  12345678int a = 4;int b = 5;int c = a + b;System.out.println(c); // 9a = 6;System.out.println(c);// 9 again, but if &apos;c&apos; was tracking the changes of &apos;a&apos; and &apos;b&apos;,// it would&apos;ve been">
<meta property="og:type" content="article">
<meta property="og:title" content="什么是响应式编程">
<meta property="og:url" content="http://www.ryanhuen.tech/2017/02/15/rx-serials-respon-explain/index.html">
<meta property="og:site_name" content="RyanHuen">
<meta property="og:description" content="什么是响应式编程？
请看下列代码：
  12345678int a = 4;int b = 5;int c = a + b;System.out.println(c); // 9a = 6;System.out.println(c);// 9 again, but if &apos;c&apos; was tracking the changes of &apos;a&apos; and &apos;b&apos;,// it would&apos;ve been">
<meta property="og:updated_time" content="2017-02-15T12:10:30.764Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="什么是响应式编程">
<meta name="twitter:description" content="什么是响应式编程？
请看下列代码：
  12345678int a = 4;int b = 5;int c = a + b;System.out.println(c); // 9a = 6;System.out.println(c);// 9 again, but if &apos;c&apos; was tracking the changes of &apos;a&apos; and &apos;b&apos;,// it would&apos;ve been">

    
    <link rel="alternative" href="/atom.xml" title="RyanHuen" type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/jacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
</head>

  <body>
    <header>
      
<div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/logo.png" alt="RyanHuen" title="RyanHuen"/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="RyanHuen">RyanHuen</a></h1>
				<h2 class="blog-motto">I hope I can protect the one thing I can&#39;t live without.</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
			</a></div>
			<nav class="animated">
				<ul>
					<ul>
					 
						<li><a href="/">首页</a></li>
					
						<li><a href="/archives">历程</a></li>
					
						<li><a href="/categories">分类</a></li>
					
						<li><a href="/tags">标签</a></li>
					
						<li><a href="/about">关于</a></li>
					
					<li>
 					
					<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
						<label>Search</label>
						<input type="search" id="search" name="q" autocomplete="off" maxlength="20" placeholder="搜索" />
						<input type="hidden" name="q" value="site:www.ryanhuen.tech">
					</form>
					
					</li>
				</ul>
			</nav>			
</div>
    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
  
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2017/02/15/rx-serials-respon-explain/" title="什么是响应式编程" itemprop="url">什么是响应式编程</a>
  </h1>
  <p class="article-author">By
       
		<a href="/about" title="RyanHuen" target="_blank" itemprop="author">RyanHuen</a>
		
  <p class="article-time">
    <time datetime="2017-02-15T12:10:32.000Z" itemprop="datePublished"> 发表于 2017-02-15</time>
    
  </p>
</header>
	<div class="article-content">
		
		<div id="toc" class="toc-article">
			<strong class="toc-title">文章目录</strong>
		
			<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#什么是响应式编程？"><span class="toc-number">1.</span> <span class="toc-text">什么是响应式编程？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#为什么需要响应式编程："><span class="toc-number">2.</span> <span class="toc-text">为什么需要响应式编程：</span></a></li></ol>
		
		</div>
		
		<p><a id="org5488664"></a></p>
<h1 id="什么是响应式编程？"><a href="#什么是响应式编程？" class="headerlink" title="什么是响应式编程？"></a>什么是响应式编程？</h1><ol>
<li><p>请看下列代码：</p>
  <figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">int</span> a = <span class="number">4</span>;</div><div class="line"><span class="keyword">int</span> b = <span class="number">5</span>;</div><div class="line"><span class="keyword">int</span> c = a + b;</div><div class="line">System.out.println(c); <span class="comment">// 9</span></div><div class="line">a = <span class="number">6</span>;</div><div class="line">System.out.println(c);</div><div class="line"><span class="comment">// 9 again, but if 'c' was tracking the changes of 'a' and 'b',</span></div><div class="line"><span class="comment">// it would've been 6 + 5 = 11</span></div></pre></td></tr></table></figure>
</li>
<li><p>上述代码中，当我们改变“a”和“b”的值的时候，“c”并没有发生改变。换句话说，“a”和“b”的改变并没有影响到“c“。</p>
<ol>
<li>这就是命令式编程环境：程序以流的形式，传递数据的改变</li>
</ol>
</li>
<li><p>而响应式编程中，”c“的值会随着”a“或者”b“的更新而更新</p>
</li>
</ol>
<p><a id="org846ab57"></a></p>
<h1 id="为什么需要响应式编程："><a href="#为什么需要响应式编程：" class="headerlink" title="为什么需要响应式编程："></a>为什么需要响应式编程：</h1><ol>
<li><p>避免回调地狱：</p>
<ol>
<li><p>请看如下代码：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">new</span> Thread() &#123;</div><div class="line">    <span class="meta">@Override</span></div><div class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>&#123;</div><div class="line">        <span class="keyword">super</span>.run();</div><div class="line">        <span class="keyword">for</span> (File folder : folders) &#123;</div><div class="line">            File[] files = folder.listFiles();</div><div class="line">            <span class="keyword">for</span> (File file : files) &#123;</div><div class="line">                <span class="keyword">if</span> (file.getName().endsWith(<span class="string">".png"</span>)) &#123;</div><div class="line">                    <span class="keyword">final</span> Bitmap bitmap = getBitmapFromFile(file);</div><div class="line">                    getActivity().runOnUiThread(<span class="keyword">new</span> Runnable() &#123;</div><div class="line">                            <span class="meta">@Override</span></div><div class="line">                            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">run</span><span class="params">()</span> </span>&#123;</div><div class="line">                                imageCollectorView.addImage(bitmap);</div><div class="line">                            &#125;</div><div class="line">                        &#125;);</div><div class="line">                &#125;</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;.start();</div></pre></td></tr></table></figure>
<ol>
<li>这样的代码写法，首先外循环的结束需要内循环的支持，而我们看到的ImageCollectorView设置图片，必须是在循环匹配的时候进行。说明我们在显示View的时候，会是一张一张展示出来，这样与我们写程序经常讲究的回调和异步就相背离了。</li>
</ol>
</li>
<li><p>再看以下代码：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//The "Nested Callbacks" Way</span></div><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">fetchUserDetails</span><span class="params">()</span> </span>&#123;</div><div class="line">    <span class="comment">//first, request the users...</span></div><div class="line">    mService.requestUsers(<span class="keyword">new</span> Callback&lt;GithubUsersResponse&gt;() &#123;</div><div class="line">        <span class="meta">@Override</span></div><div class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">success</span><span class="params">(<span class="keyword">final</span> GithubUsersResponse githubUsersResponse,</span></span></div><div class="line">                            <span class="keyword">final</span> Response response) &#123;</div><div class="line">            Timber.i(TAG, <span class="string">"Request Users request completed"</span>);</div><div class="line">            <span class="keyword">final</span> <span class="keyword">synchronized</span> List&lt;GithubUserDetail&gt; githubUserDetails</div><div class="line">                                              = <span class="keyword">new</span> ArrayList&lt;GithubUserDetail&gt;();</div><div class="line">            <span class="comment">//next, loop over each item in the response</span></div><div class="line">            <span class="keyword">for</span> (GithubUserDetail githubUserDetail : githubUsersResponse) &#123;</div><div class="line">                <span class="comment">//request a detail object for that user</span></div><div class="line">                mService.requestUserDetails(githubUserDetail.mLogin,</div><div class="line">                                            <span class="keyword">new</span> Callback&lt;GithubUserDetail&gt;() &#123;</div><div class="line">                    <span class="meta">@Override</span></div><div class="line">                    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">success</span><span class="params">(GithubUserDetail githubUserDetail,</span></span></div><div class="line">                                        Response response) &#123;</div><div class="line">                        Log.i(<span class="string">"User Detail request completed for user : "</span> </div><div class="line">                                                        + githubUserDetail.mLogin);</div><div class="line">                        githubUserDetails.add(githubUserDetail);</div><div class="line">                        <span class="keyword">if</span> (githubUserDetails.size() == githubUsersResponse.mGithubUsers.size()) &#123;</div><div class="line">                            <span class="comment">//we've downloaded'em all - notify all who are interested!</span></div><div class="line">                            mBus.post(<span class="keyword">new</span> UserDetailsLoadedCompleteEvent(githubUserDetails));</div><div class="line">                        &#125;</div><div class="line">                    &#125;</div><div class="line">                    <span class="meta">@Override</span></div><div class="line">                    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">failure</span><span class="params">(RetrofitError error)</span> </span>&#123;</div><div class="line">                        Log.e(TAG, <span class="string">"Request User Detail Failed!!!!"</span>, error);</div><div class="line">                    &#125;</div><div class="line">                &#125;);</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">        <span class="meta">@Override</span></div><div class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">failure</span><span class="params">(RetrofitError error)</span> </span>&#123;</div><div class="line">            Log.e(TAG, <span class="string">"Request User Failed!!!!"</span>, error);</div><div class="line">        &#125;</div><div class="line">    &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ol>
<li><p>上述代码中，我们首先调用web service，使用回调接口将成功的结果传递给下一个web service请求，同时定义另一个成功回调，然后发起下一个web service请求。这其中有两层回调，同时也是异步的。和我们推崇的代码风格比较接近了。但是你们看出来问题了吗？</p>
<ol>
<li>尽管上述代码用了回调。是异步请求，每个请求完成的时候不会阻塞。但是代码的易读性？可维护性呢？</li>
</ol>
</li>
</ol>
</li>
<li><p>最后，这是RxJava的代码：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">rxFetchUserDetails</span><span class="params">()</span> </span>&#123;</div><div class="line">    <span class="comment">//request the users</span></div><div class="line">    mService.rxRequestUsers().concatMap(Observable::from)</div><div class="line">        .concatMap((GithubUser githubUser) -&gt;</div><div class="line">                   <span class="comment">//request the details for each user</span></div><div class="line">                   mService.rxRequestUserDetails(githubUser.mLogin)</div><div class="line">                   )</div><div class="line">        <span class="comment">//accumulate them as a list</span></div><div class="line">        .toList()</div><div class="line">        <span class="comment">//define which threads information will be passed on</span></div><div class="line">        .subscribeOn(Schedulers.newThread())</div><div class="line">        .observeOn(AndroidSchedulers.mainThread())</div><div class="line">        <span class="comment">//post them on an eventbus</span></div><div class="line">        .subscribe(githubUserDetails -&gt; &#123;</div><div class="line">                EventBus.getDefault().post(<span class="keyword">new</span> UserDetailsLoadedCompleteEvent(githubUserDetails));</div><div class="line">            &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<ol>
<li><p>抛弃回调，代码精简，可读性非常高，流式API，让人一目了然。</p>
</li>
<li><p>这就是响应式编程，流式API的好处</p>
</li>
</ol>
</li>
</ol>
</li>
</ol>
  
	</div>
		<footer class="article-footer clearfix">
<div class="article-catetags">

<div class="article-categories">
  <span></span>
  <a class="article-category-link" href="/categories/RXJava系列/">RXJava系列</a>
</div>


  <div class="article-tags">
  
  <span></span> <a href="/tags/RxJava/">RxJava</a><a href="/tags/响应式编程/">响应式编程</a>
  </div>

</div>



	<div class="article-share" id="share">
	
	  <div data-url="http://www.ryanhuen.tech/2017/02/15/rx-serials-respon-explain/" data-title="什么是响应式编程 | RyanHuen" data-tsina="null" class="share clearfix">
	  </div>
	
	</div>


</footer>

   	       
	</article>
	
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2017/02/16/rx-serials-base-intro/" title="RxJava基础篇(一)">
  <strong>上一篇：</strong><br/>
  <span>
  RxJava基础篇(一)</span>
</a>
</div>


<div class="next">
<a href="/2017/02/15/spacemacs_install_config/"  title="Spacemacs的安装与配置（基础篇）">
 <strong>下一篇：</strong><br/> 
 <span>Spacemacs的安装与配置（基础篇）
</span>
</a>
</div>

</nav>

	
<section id="comments" class="comment">
	<div class="ds-thread" data-thread-key="2017/02/15/rx-serials-respon-explain/" data-title="什么是响应式编程" data-url="http://www.ryanhuen.tech/2017/02/15/rx-serials-respon-explain/"></div>
</section>


</div>  
      <div class="openaside"><a class="navbutton" href="#" title="显示侧边栏"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">文章目录</strong>
 
 <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#什么是响应式编程？"><span class="toc-number">1.</span> <span class="toc-text">什么是响应式编程？</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#为什么需要响应式编程："><span class="toc-number">2.</span> <span class="toc-text">为什么需要响应式编程：</span></a></li></ol>
 
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div>
<aside class="clearfix">

  
<div class="categorieslist">
	<p class="asidetitle">分类</p>
		<ul>
		
		  
			<li><a href="/categories/Emacs系列/" title="Emacs系列">Emacs系列<sup>3</sup></a></li>
		  
		
		  
			<li><a href="/categories/Framework系列/" title="Framework系列">Framework系列<sup>1</sup></a></li>
		  
		
		  
			<li><a href="/categories/RXJava系列/" title="RXJava系列">RXJava系列<sup>7</sup></a></li>
		  
		
		  
			<li><a href="/categories/git入门系列/" title="git入门系列">git入门系列<sup>5</sup></a></li>
		  
		
		  
			<li><a href="/categories/Emacs系列/org-mode/" title="org-mode">org-mode<sup>1</sup></a></li>
		  
		
		</ul>
</div>


  
<div class="tagslist">
	<p class="asidetitle">标签</p>
		<ul class="clearfix">
		
			
				<li><a href="/tags/RxJava/" title="RxJava">RxJava<sup>7</sup></a></li>
			
		
			
				<li><a href="/tags/git/" title="git">git<sup>5</sup></a></li>
			
		
			
				<li><a href="/tags/RxJava基础/" title="RxJava基础">RxJava基础<sup>4</sup></a></li>
			
		
			
				<li><a href="/tags/Spacemacs/" title="Spacemacs">Spacemacs<sup>3</sup></a></li>
			
		
			
				<li><a href="/tags/Emacs/" title="Emacs">Emacs<sup>3</sup></a></li>
			
		
			
				<li><a href="/tags/观察者模式/" title="观察者模式">观察者模式<sup>3</sup></a></li>
			
		
			
				<li><a href="/tags/BackPressure/" title="BackPressure">BackPressure<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/org/" title="org">org<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/Java回调/" title="Java回调">Java回调<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/Debug/" title="Debug">Debug<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/设计模式/" title="设计模式">设计模式<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/RxJava操作符/" title="RxJava操作符">RxJava操作符<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/响应式编程/" title="响应式编程">响应式编程<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/Android-Studio/" title="Android Studio">Android Studio<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/Framework/" title="Framework">Framework<sup>1</sup></a></li>
			
		
			
				<li><a href="/tags/org-mode/" title="org-mode">org-mode<sup>1</sup></a></li>
			
		
		</ul>
</div>


  <div class="rsspart">
	<a href="/atom.xml" target="_blank" title="rss">RSS 订阅</a>
</div>

</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	<div class="line">
		<span></span>
		<div class="author"></div>
	</div>
	
	
	<section class="info">
		<p> Hi there,I&#39;m RyanHuen <br/>
			A simple programmer</p>
	</section>
	 
	<div class="social-font" class="clearfix">
		
		<a href="http://weibo.com/ryanxuan" target="_blank" class="icon-weibo" title="微博"></a>
		
		
		<a href="https://github.com/RyanHuen" target="_blank" class="icon-github" title="github"></a>
		
		
		
		
		
		
		
		<a href="http://www.zhihu.com/people/ryan-hyn" target="_blank" class="icon-zhihu" title="知乎"></a>
		
		
		
		<a href="mailto:ryanhuenwork@163.com" target="_blank" class="icon-email" title="Email Me"></a>
		
	</div>
			
		

		<p class="copyright">
		Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/wuchong/jacman" target="_blank" title="Jacman">Jacman</a> © 2017 
		
		<a href="/about" target="_blank" title="RyanHuen">RyanHuen</a>
		
		
		</p>
</div>
</footer>
    <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<script src="/js/jquery.qrcode-0.12.0.min.js"></script>

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
  
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else{
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  c.click(function(){
    ta.css('display', 'block').addClass('fadeIn');
  });
  o.click(function(){
    ta.css('display', 'none');
  });
  $(window).scroll(function(){
    ta.css("top",Math.max(140,320-$(this).scrollTop()));
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(){ 
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina'),
      description = $this.attr('description');
  var html = [
  '<div class="hoverqrcode clearfix"></div>',
  '<a class="overlay" id="qrcode"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="微信"></a>',
  '<a href="http://widget.renren.com/dialog/share?resourceUrl=' + encodedUrl + '&srcUrl=' + encodedUrl + '&title=' + title +'" class="article-share-renren" target="_blank" title="人人"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="微博"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);

  $('.hoverqrcode').hide();

  var myWidth = 0;
  function updatehoverqrcode(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
    var qrsize = myWidth > 1024 ? 200:100;
    var options = {render: 'image', size: qrsize, fill: '#2ca6cb', text: url, radius: 0.5, quiet: 1};
    var p = $('.article-share-qrcode').position();
    $('.hoverqrcode').empty().css('width', qrsize).css('height', qrsize)
                          .css('left', p.left-qrsize/2+20).css('top', p.top-qrsize-10)
                          .qrcode(options);
  };
  $(window).resize(function(){
    $('.hoverqrcode').hide();
  });
  $('.article-share-qrcode').click(function(){
    updatehoverqrcode();
    $('.hoverqrcode').toggle();
  });
  $('.article-share-qrcode').hover(function(){}, function(){
      $('.hoverqrcode').hide();
  });
});   
</script>



<script type="text/javascript">
  var duoshuoQuery = {short_name:"ryanhuen"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
    || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script> 







<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
}); 
</script>



<!-- Analytics Begin -->



<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?af124d045b4aed59105f75db52359992";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>



<!-- Analytics End -->

<!-- Totop Begin -->

	<div id="totop">
	<a title="返回顶部"><img src="/img/scrollup.png"/></a>
	</div>
	<script src="/js/totop.js"></script>

<!-- Totop End -->

<!-- MathJax Begin -->
<!-- mathjax config similar to math.stackexchange -->


<!-- MathJax End -->

<!-- Tiny_search Begin -->

<!-- Tiny_search End -->

  </body>
</html>
